/**
 * Created by 69466 on 2018/9/13.
 */
import React, {Component} from 'react';
import {StyleSheet} from 'react-native';
import {
  Button,
  Dialog,
  Image,
  Text,
  TextField,
  TouchableOpacity,
  View,
} from 'react-native-ui-lib';
import {commonStyles} from '../../configs/commonStyle';
import {Icon} from '../components';
import navigator from "../../utils/navigator";
import {inject, observer} from "mobx-react";

@inject("userStore")
@observer
export default class SeekOrderTipDialog extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: props.userStore.isSeekOrderTip,
      content: '您有咨询工单等来处理，请前往处理...',
      title: '提示',
    };
  }

  show = (content, title = '提示') => {
    this.setState({content, title});
    this.props.userStore.setValue('isSeekOrderTip', true)
  };

  dismiss = () => {
    this.props.userStore.setValue('isSeekOrderTip', false)
  };

  goSeekOrder = () => {
    navigator.navigate('SeekOrder');
  }

  renderPannableHeader = props => {
    return (
      <View>
        <View margin-10 row centerV spread>
          <View flex centerV>
            <Text style={{...commonStyles.text_black_17}}>
              {this.state.title}
            </Text>
          </View>
          <TouchableOpacity onPress={this.dismiss}>
            <Icon type="AntDesign" name={'close'} size={16} color={'#282828'} />
          </TouchableOpacity>
        </View>
        <View height={1} bg-line />
      </View>
    );
  };

  render() {
    const { isSeekOrderTip } = this.props.userStore;
    return (
      <Dialog
        migrate
        width={'90%'}
        useSafeArea
        containerStyle={styles.roundedDialog}
        visible={isSeekOrderTip}
        renderPannableHeader={this.renderPannableHeader}
        onDismiss={() => this.dismiss()}>
        <View padding-15>
          <Text style={{...commonStyles.text_black, lineHeight: 20}}>
            {this.state.content}
          </Text>
        </View>
        <View row style={{borderTopColor: '#eeeeee', borderTopWidth: 1}}>
           <Button
             flex
             background-white
             labelStyle={{color: '#666666'}}
             text14
             label={'去处理'}
             onPress={() => {
               this.dismiss();
               this.goSeekOrder();
             }}
           />
         </View>
      </Dialog>
    );
  }
}

const styles = StyleSheet.create({
  roundedDialog: {
    backgroundColor: 'white',
    borderRadius: 4,
  },
  inputView: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 10,
    borderWidth: 1,
    borderRadius: 4,
    borderColor: '#D8D8D8',
    height: 45,
  },
});
